<template>
  <view class="login-container">
    <!-- 头部区域 -->
    <view class="header">
      <u-icon name="search-user" color="#2979FF" size="60"></u-icon>
      <text class="title">智能招聘</text>
      <text class="subtitle">让人才与机会精准匹配</text>
    </view>

    <!-- 表单区域 -->
    <u-form :model="form" class="form-wrapper">
		<u-tabs :list="list" :is-scroll="false" :current="form.current" @change="change"></u-tabs>
      <!-- 账号输入项 -->
      <u-form-item 	  
        :label="list[form.current].name"
        label-position="left"    
        label-width="120rpx"     
        label-align="right"      
      >
        <u-input 
		v-model="form.account"
          :type="form.current === 1 ? 'number' : 'text'" 
          placeholder="请输入" 
          :border="true"
        />
      </u-form-item>
          
      <!-- 密码输入项 -->
      <u-form-item 
        label="密码" 
        label-position="left" 
        label-width="120rpx" 
        label-align="right"
      >
        <u-input 
          v-model="form.password" 
          type="password" 
          placeholder="请输入" 
          :border="true"
        />
      </u-form-item>

      <!-- 登录按钮 -->
      <u-form-item>
        <u-button 
          type="primary" 
          block 
          class="login-btn"
          @click="loginHandler"
        >登录</u-button>
      </u-form-item>

      <!-- 注册引导 -->
      <view class="register-row">
        <text>还没有账号？</text>
        <navigator url="/pages/zcy/enroll" class="link">立刻注册</navigator>
      </view>
    </u-form>
	<u-toast ref="uToast" />
  </view>
</template>

<script>
	import {login} from "@/api/user.js"
	import actions from '@/store/actions.js'
	export default {
	  data() {
	    return {
	      form: {
	        password: '',
			account: '',
			current: 0,
	      },
		  list: [{
		  			name: '邮箱'
		  		}, {
		  			name: '电话'
		  		}, {
		  			name: '账号',
		  		}]
	    }
	  },
	  methods: {
		  //登录操作
	    loginHandler() {
	     if(this.form.account === ''){
	      	this.$refs.uToast.show({
	      		title: `${this.list[this.form.current].name}不可为空`,
	      		type: 'warning',
	      		position:'top'
	      	})
	      	return;
	      }
	      if(this.form.password === ''){
	      	this.$refs.uToast.show({
	      		title: '密码不可为空',
	      		type: 'warning',
	      		position:'top'
	      	})
	      	return;
	      }
		  console.log('准备调用login接口');
		  login(this.form).then(res =>{
			  console.log('login接口请求成功：', res); // 打印成功响应
			  if(res.code == 200){
				   uni.showToast({ title: '登录成功' })
				   uni.setStorageSync("token",res.data)
				   setTimeout(() => {
				       uni.switchTab({
				           url: '/pages/zcy/main'  
				       });
				   }, 500); // 延迟时间可根据实际调整，保证 toast 能显示完整
			  }else if(res.code == 201){
				  uni.setStorageSync("token",res.data);
				  actions.getUserInfo(res.data);
				  //跳转到首页
				  setTimeout(() => {
				      uni.navigateTo({
				          url: '/pages/zcy/jobInformation'  
				      });
				  }, 500);
			  }else{
				  uni.showToast({ title: `登录失败,${this.list[this.form.current].name}或密码错误`, icon: 'none' })
			  }
		  })
		  .catch(error =>{
		    console.error('login接口请求失败：', error); // err未定义，会报ReferenceError
		    console.error('错误详情：', err.message || error);
		    uni.showToast({ title: '，请重试', icon: 'none' })
		  })
	    },
		change(index) {
			this.form.current = index;
		}
	  }
	}
</script>

<style scoped>
/* 基础响应式设置 */
:root {
  --base-font-size: 28rpx;
  --spacing-unit: 20rpx;
}

/* 页面容器 - 自适应布局 */
.login-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background-color: #F5F7FA;
  padding: var(--spacing-unit);
  box-sizing: border-box;
}

/* 头部样式 - 响应式调整 */
.header {
  text-align: center;
  margin-bottom: calc(var(--spacing-unit) * 3);
  width: 100%;
  max-width: 600rpx;
  margin-bottom: 30px;
}

.header .title {
  font-size: calc(var(--base-font-size) + 8rpx);
  font-weight: bold;
  color: #333;
  margin-top: calc(var(--spacing-unit) * 1);
  display: block;
}

.header .subtitle {
  font-size: calc(var(--base-font-size) - 4rpx);
  color: #999;
  margin-top: calc(var(--spacing-unit) * 0.5);
  display: block;
}

/* 表单容器 - 自适应宽度 */
.form-wrapper {
  width: 100%;
  max-width: 600rpx;
  background: #FFFFFF;
  padding: calc(var(--spacing-unit) * 2);
  border-radius: 16rpx;
  box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.1);
  box-sizing: border-box;
}

/* 表单项间距 */
.u-form-item {
  margin-bottom: 0;
}

/* 输入框样式 */
.u-input {
  border-radius: 8rpx;
  height: 80rpx;
  margin-right: 20px;
}

/* 登录按钮 */
.login-btn {
  border-radius: 8rpx;
  height: 88rpx;
  line-height: 88rpx;
  font-size: var(--base-font-size);
}

/* 注册行样式 */
.register-row {
  text-align: center;
  margin-top: var(--spacing-unit);
  font-size: calc(var(--base-font-size) - 4rpx);
  color: #666;
  white-space: nowrap; 
}

.register-row text,
.register-row navigator {
  display: inline-block; 
  vertical-align: middle;
}

.register-row .link {
  color: #2979FF;
  margin-left: 10rpx;
  text-decoration: underline;
}

/* 小屏幕设备 (如手机竖屏, < 600rpx) */
@media screen and (max-width: 600rpx) {
  :root {
    --base-font-size: 26rpx;
    --spacing-unit: 16rpx;
  }
  
  .form-wrapper {
    padding: calc(var(--spacing-unit) * 1.5);
  }
  
  .u-input, .login-btn {
    height: 76rpx;
    line-height: 76rpx;
  }
  
  .header {
    margin-bottom: 30px;
  }
}

/* 大屏幕设备 (如平板, > 900rpx) */
@media screen and (min-width: 900rpx) {
  :root {
    --base-font-size: 32rpx;
    --spacing-unit: 24rpx;
  }
  
  .form-wrapper {
    max-width: 700rpx;
    padding: calc(var(--spacing-unit) * 2.5);
  }
  
  .u-input, .login-btn {
    height: 92rpx;
    line-height: 92rpx;
  }
  
  .header {
    margin-bottom: 30px;
  }
  
  .header .title {
    font-size: calc(var(--base-font-size) + 12rpx);
  }
}

/* 横屏模式适配 */
@media (orientation: landscape) {
  .login-container {
    padding: calc(var(--spacing-unit) * 3);
  }
  
  .form-wrapper {
    max-width: 70%;
  }
}
</style>